<template>
	<view class="conter">
		<u--image width="680rpx" height="680rpx" radius="14rpx"
			:src="imgUrl + (mon_data.baseImg || monDetail.drawVideo)" class="img"></u--image>
		<!-- 关于 -->
		<view style="display: flex;align-items: center; width: 680rpx; justify-content:space-between; margin: 34.88rpx 0 0;">
			<view class="boutone">关于</view>
			<view @click="gomarket" class="numberome">当前寄售数量：{{ mon_data.count || monDetail.marketCount }}份 <u-icon class="icon" color="#fff"
				size="12" name="arrow-right"></u-icon></view>
		</view>
		<view class="barriers_box">
			<view style="display: flex">
				<view class="">
					<view class="raceName" v-if="mon_data.raceName || monDetail.raceName">
						<view :style="getRaceTextStyle(mon_data.raceName || monDetail.raceName)">
							{{ mon_data.raceName || monDetail.raceName }}</view>
					</view>
					<view v-else>
						<view class="raceName" style="font-weight: 800">未知</view>
					</view>
				</view>
				<view class="number" v-if="mon_data.number || monDetail.number">
					<view v-if="mon_data.raceName || monDetail.raceName">
						<!-- <image class="img-box" :src="getRaceImageSrc(mon_data.raceName || monDetail.raceName)" mode=""></image> -->
						<view :style="getRaceTextStyle(mon_data.raceName || monDetail.raceName)">
							#{{ mon_data.number || monDetail.number }}</view>
					</view>

					<view v-else>
						<text>#{{ mon_data.number || monDetail.number }}</text>
					</view>
				</view>
			</view>
			<view class="popo_box">
				<view class="image_box">
					<view>
						<image class="ioverui" :src="imgUrl + (mon_data.avatar || monDetail.avatar)" mode=""></image>
					</view>
					<view class="iove_box">
						<view>拥有者</view>
						<view
							style="color: #8a92a3; margin-top: 5rpx; width: 150rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
							{{ mon_data.nickName || monDetail.nickName }}
						</view>
					</view>
				</view>
				<view class="price">
					<view style="font-size: 32rpx">当前价格</view>
					<view style="margin-top: 5rpx">
						<text>￥</text>
						{{ integerPart || integerPar2 || 0 }}
						<text>{{ mon_data.price ? extractDecimalDigits(mon_data.price) : extractDecimalDigits(monDetail.consignmentQuantity) }}</text>
					</view>
				</view>
			</view>
			<button @click="buy" class="buy_btn" v-if="isHunting === 1 || isParents == 2">立即购买</button>
		</view>
		<!-- 关于 -->
		<!-- 家谱 -->
		<view class="genealogy_box">
			<view class="boutne">家谱</view>
			<view class="parents">父母</view>
			<view v-if="mon_parents != 0">
				<view class="mon_baby" v-for="(item, index) in mon_parents" :key="index">
					<view @click="go_mon_details(item.id, item.mature)" class="allmon">
						<image :src="imgUrl + item.image2" mode=""></image>
					</view>
					<view style="position: absolute; margin-left: 125rpx; color: #ffffff; font-weight: 700">
						{{ item.name }}</view>
					<view class="number_mon">
						<view class="babymon_number">
							<!-- <image class="img-box" :src="getRaceImageSrc(item.raceName)" mode=""></image> -->
							<view :style="getRaceTextStyle(item.raceName)">#{{ item.id }}</view>
						</view>
					</view>
					<view @touchstart="sPopup(item, index)" @touchend="Popup"
						style="position: absolute; right: 34.88rpx; top: 60rpx">
						<u-icon :color="currentIndex == index ? '#ee773b' : '#606266'" name="info-circle"></u-icon>
					</view>
					<u-popup bgColor="transparent" :show="shows" @close="close" :round="6" mode="center">
						<view class="nextBreedCost1">
							<!-- 部位 -->
							<view style="display: flex">
								<view class="site_box">
									<view>背景：</view>
									<view>尾巴：</view>
									<view>背部：</view>
									<view>身体：</view>
									<view>嘴巴：</view>
									<view>眼睛：</view>
									<view>耳朵：</view>
									<view>头顶：</view>
								</view>
								<view class="all_box">
									<view style="display: flex; width: 380rpx; justify-content: space-around">
										<view style="width: 50rpx; text-align: center; height: 45rpx">D</view>
										<view style="width: 50rpx; text-align: center; height: 45rpx">R</view>
										<view style="width: 50rpx; text-align: center; height: 45rpx">R1</view>
									</view>
									<view style="display: flex; width: 380rpx; justify-content: space-around">
										<view>
											<image style="width: 50rpx; height: 45rpx"
												:src="imgUrl + '/static/images/d1.png'"></image>
										</view>
										<view>
											<image style="width: 50rpx; height: 45rpx"
												:src="imgUrl + '/static/images/d2.png'"></image>
										</view>
										<view>
											<image style="width: 50rpx; height: 45rpx"
												:src="imgUrl + '/static/images/d3.png'"></image>
										</view>
									</view>
									<!-- 背景 -->
									<view
										style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text
											:style="getDnaColorStyle(paerntsDnaList[0])">{{ paerntsDnaList[0] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[1])">{{ paerntsDnaList[1] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[2])">{{ paerntsDnaList[2] }}</text>
									</view>
									<view
										style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text
											:style="getDnaColorStyle(paerntsDnaList[6])">{{ paerntsDnaList[6] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[7])">{{ paerntsDnaList[7] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[8])">{{ paerntsDnaList[8] }}</text>
									</view>
									<view
										style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text
											:style="getDnaColorStyle(paerntsDnaList[9])">{{ paerntsDnaList[9] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[10])">{{ paerntsDnaList[10] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[11])">{{ paerntsDnaList[11] }}</text>
									</view>
									<view
										style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text
											:style="getDnaColorStyle(paerntsDnaList[12])">{{ paerntsDnaList[12] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[13])">{{ paerntsDnaList[13] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[14])">{{ paerntsDnaList[14] }}</text>
									</view>
									<view
										style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text
											:style="getDnaColorStyle(paerntsDnaList[15])">{{ paerntsDnaList[15] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[16])">{{ paerntsDnaList[16] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[17])">{{ paerntsDnaList[17] }}</text>
									</view>

									<view
										style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text
											:style="getDnaColorStyle(paerntsDnaList[18])">{{ paerntsDnaList[18] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[19])">{{ paerntsDnaList[19] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[20])">{{ paerntsDnaList[20] }}</text>
									</view>

									<view
										style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text
											:style="getDnaColorStyle(paerntsDnaList[21])">{{ paerntsDnaList[21] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[22])">{{ paerntsDnaList[22] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[23])">{{ paerntsDnaList[23] }}</text>
									</view>

									<view
										style="display: flex; width: 380rpx; margin-top: 20rpx; justify-content: space-around">
										<text
											:style="getDnaColorStyle(paerntsDnaList[24])">{{ paerntsDnaList[24] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[25])">{{ paerntsDnaList[25] }}</text>
										<text
											:style="getDnaColorStyle(paerntsDnaList[26])">{{ paerntsDnaList[26] }}</text>
									</view>

									<!-- 头顶 -->
								</view>
							</view>
							<!-- 部位 -->
						</view>
					</u-popup>
				</view>
			</view>
			<view v-if="mon_parents.length == 0">
				<image style="width: 280rpx; height: 280rpx; margin: 0 180rpx 0" src="../../static/images/fighting.gif"
					mode=""></image>
			</view>
			<view class="parents">子女</view>
			<view class="children">
				<view class="children-box" v-if="mon_children.length != 0">
					<view class="disabledone" v-for="item in mon_children" :key="item.id"
						@click="go_mon_details(item.id, item.mature)">
						<u--image width="293rpx" height="293rpx" radius="9rpx" style="padding: 0 10rpx 0 20rpx"
							:src="imgUrl + item.image2" mode=""></u--image>
						<view class="disabledtow">
							<text v-if="!item.raceName" style="margin: 10rpx">#{{ item.id }}</text>
							<view class="priceotow" v-if="item.raceName">
								<!-- <image class="img-box" :src="getRaceImageSrc(item.raceName)" mode=""></image> -->
								<view :style="getRaceTextStyle(item.raceName)">#{{ item.id }}</view>
							</view>
						</view>
						<view class="disabledtow1" v-if="item.raceName">
							<view :style="getRaceTextStyle(item.raceName)">{{ item.raceName }}</view>
						</view>
					</view>
				</view>
				<view v-if="mon_children.length == 0">
					<image style="width: 280rpx; height: 280rpx; margin: 0 180rpx 0"
						src="../../static/images/fighting.gif" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 家谱 -->
		<!-- 近期活动 -->
		<view class="activities_box">
			<view class="boutne">近期活动</view>

			<view v-if="rencentArr.length != 0">
				<view class="disabledone" v-for="(item, index) in rencentArr" :key="index">
					<view class="popo">
						<view>日期：{{ item.date }}</view>
						<view>价格：{{ item.price }}</view>
					</view>
					<view class="conterakpap">
						<view style="color: #8a92a3">
							<view>买方：{{ item.buyerNickname }}</view>
							<view style="display: flex; margin-top: 15rpx">
								区块链：
								<view class="done">{{ item.buyerChainAddress }}</view>
							</view>
						</view>
						<view style="display: block; color: #8a92a3">
							<view>卖方：{{ item.sellNickname }}</view>
							<view style="display: flex; margin-top: 15rpx">
								区块链：
								<view class="done">{{ item.sellChainAddress }}</view>
							</view>
						</view>
					</view>
					<view style="margin-top: 30rpx; color: #8a92a3; margin-left: 20rpx">孵化时间：{{ item.birthdayTime }}
					</view>
				</view>
			</view>
			<view v-if="rencentArr.length == 0">
				<image style="width: 280rpx;
		        height: 280rpx; margin: 0 180rpx 0" src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</view>
		<!-- 近期活动 -->
	</view>
</template>

<script>
	import {
		getUserAdmin
	} from '@/utils/auth.js';
	import config, {
		imgUrl,
		monDetailUrl
	} from '@/config.js';
	import {
		getCollection,
		goMonPay,
		getBreedTree,
		getmonDetail,
		getDna2
	} from '@/api/work/market.js';
	import {
		getInfo
	} from '@/api/login';
	export default {
		data() {
			return {
				admin: getUserAdmin(),
				imgUrl: config.imgUrl,
				raceImageMap: {
					恶魔: 'emo.png',
					天使: 'tianshi.png',
					植物: 'plant.png',
					元素: 'yuansu.png',
					兽族: 'shou.png',
					神族: 'god.png',
					机械: 'jixie.png',
					海洋: 'hai.png',
					精灵: 'ling.png'
					// 添加其他raceName到图片路径的映射...
				},
				bgcolor: '#606266',
				bgcolors: '#606266',
				currentIndex: -1, // 初始值为-1，表示没有任何元素被点击
				showOverlay: true,
				show: false,
				onshow: true,
				imgUrl: config.imgUrl,
				mp4Falg: true,
				scrollTop: 0,
				webviewStyles: {
					position: 'static'
				},
				list1: [{
						name: '身体部位'
					},
					{
						name: '基因细节'
					}
				],
				id: '',
				current: 0,
				mon_data: {},
				number: '',
				mon_children: [],
				mon_parents: [],
				isParents: '',
				monDetail: {},
				isHunting: '',
				rencentArr: [],
				part: {},
				raceFlag: '',
				scrollTop: 0,
				pic: '',
				srcUrl: '',
				familyList: [],
				dnaList: [],
				paerntsDnaList: [],
				shows: false
			};
		},
		onReady() {
			// #ifdef APP-PLUS
			let height = 380; //定义动态的高度变量
			// let width = 340; //定义动态的高度变量
			let statusbar = 10; // 动态状态栏高度
			let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				wv.setStyle({
					//设置web-view距离顶部的距离以及自己的高度，单位为px
					top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
					height: height //webview的高度
				});
			}, 200); //如页面初始化调用需要写延迟
			// #endif
		},
		async onLoad(options) {
			this.id = options.id;
			this.isParents = options.isParents;
			this.raceFlag = options.raceFlag;
			if (this.isParents == 2) {
				await this.getCollection();
			} else {
				await this.getmonDetail();
			}
			await this.getBreedTree();
			if (this.raceFlag == 1) {
				// await this.getMonParts();
			}
			await this.getDna();
			// #ifdef APP-PLUS
			let height = 380; //定义动态的高度变量
			// let width = 340; //定义动态的高度变量
			let statusbar = 10; // 动态状态栏高度
			let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				let _this = this;
				wv.setStyle({
					//设置web-view距离顶部的距离以及自己的高度，单位为px
					top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
					height: height //webview的高度
				});
			}, 200); //如页面初始化调用需要写延迟

			// #endif
		},
		created() {
			this.getUserWithToken();
		},
		computed: {
			integerPart() {
				return Math.floor(this.mon_data.price);
			},
			integerPar2() {
				return Math.floor(this.getmonDetail.consignmentQuantity);
			}
		},
		methods: {
			gomarket() {
				uni.switchTab({
					url: '/pages/market/duck' // 跳转到市场
				});
			},
			getDnaColorStyle(dna) {
				switch (dna) {
					case '天使':
						return {
							color: '#3fd8d9'
						};
					case '恶魔':
						return {
							color: '#d467e0'
						};
					case '植物':
						return {
							color: '#99ff73'
						};
					case '元素':
						return {
							color: '#ff78b4'
						};
					case '兽族':
						return {
							color: '#f4a037'
						};
					case '神族':
						return {
							color: '#f8ff7f'
						};
					case '机械':
						return {
							color: '#8c8e9e'
						};
					case '海洋':
						return {
							color: '#a9dbf5'
						};
					case '精灵':
						return {
							color: '#21d1a5'
						};
						// 其他 DNA 类型的颜色设置
					default:
						return {
							color: ''
						};
				}
			},
			getRaceImageSrc(raceName) {
				// 如果raceName存在于映射表中，返回对应的图片路径；否则返回默认路径或占位图路径
				return this.raceImageMap[raceName] ? this.imgUrl + '/appStatic/png/' + this.raceImageMap[raceName] : this
					.imgUrl + '/appStatic/png/placeholder.png';
			},
			getRaceTextStyle(raceName) {
				if (raceName) {
					return {
						color: this.getRaceColor(raceName), // 调用一个方法，根据raceName获取颜色
						// 其他样式...
						fontWeight: 600
					};
				} else {
					return {
						color: '#ffffff' // 默认颜色
						// 其他样式...
					};
				}
			},
			getRaceColor(raceName) {
				// 根据raceName获取对应的颜色
				const colorMap = {
					恶魔: '#d467e0',
					天使: '#3fd8d9',
					植物: '#99ff73',
					元素: '#ff78b4',
					兽族: '#f5a037',
					神族: '#f8ff7f',
					机械: '#8c8e9e',
					海洋: '#a9dbf5',
					精灵: '#21d1a5'
				};
				return colorMap[raceName] || '#ffffff'; // 默认颜色
			},
			async sPopup(item, index) {
				// this.shows = true;
				// this.currentIndex = index; // 将当前点击的元素索引记录下来
				// let param = {};
				// param.petId = item.id;
				// const data = await getDna2(param);
				// this.paerntsDnaList = data.data;
			},
			Popup() {
				this.shows = false;
				this.currentIndex = -1; // 点击结束时重置 currentIndex 为 -1，表示没有任何元素被点击
			},
			click(item) {
				this.current = item.index;
			},
			showPopup() {
				this.show = true;
				this.bgcolor = '#ed763b';
			},
			closePopup() {
				this.show = false;
				this.bgcolor = '#606266';
			},
			click(item) {
				this.current = item.index;
			},
			async getDna() {
				let param = {};
				param.petId = this.mon_data.number || this.monDetail.number;
				const data = await getDna2(param);
				this.dnaList = data.data;
			},
			close() {
				this.show = false;
			},
			// 获取用户信息
			async getUserWithToken() {
				const res = await getInfo();
				this.admin = res.data;
			},
			loadvideo() {
				setTimeout(() => {
					this.mp4Falg = false;
				}, 500);
			},
			showDialog() {
				this.mp4Falg = true;
			},
			extractDecimalDigits(value) {
				const value1 = Number(value).toFixed(2);
				const stringValue = value1.toString(); // 将值转换为字符串
				const decimalIndex = stringValue.indexOf('.'); // 找到小数点的位置

				if (decimalIndex !== -1) {
					const decimalPart = stringValue.substr(decimalIndex + 1, 2); // 提取小数点后俩位

					return '.' + decimalPart;
				} else {
					return ''; // 如果没有小数部分，则返回空字符串
				}
			},
			// 藏馆mon
			async getmonDetail() {
				const res = await getmonDetail(this.id, this.isParents);

				this.id = res.data.id;
				this.isHunting = res.data.isHunting;
				this.monDetail = res.data;
				this.number = res.data.number;
				let pic = res.data.drawVideo;
				this.srcUrl = monDetailUrl + '?id=' + pic;
			},
			go_mon_details(id, mature = 1) {
				uni.navigateTo({
					url: '/pages/MarketOrder/Details?id=' + id + '&isParents=1' + '&raceFlag=' +
						mature // 跳转到目标页面的路径 萌宝详情页
				});
			},
			async getBreedTree() {
				const res = await getBreedTree(this.number);
				this.mon_children = res.data.children || [];
				this.mon_parents = res.data.parents || [];
				this.familyList = [...this.mon_children, ...this.mon_parents];
			},
			async buy() {
				const res = await goMonPay(this.id);
				// console.log(res,'buyid');
				if (res.code == 200) {
					uni.navigateTo({
						url: `/pages/MarketOrder/monOrder?id=${res.data.id}&isParents=1`
					});
				}
			},
			gomarket() {
				uni.switchTab({
					url: '/pages/work/market' // 跳转到市场
				});
			},
			async getCollection() {
				const res = await getCollection(this.id);
				this.mon_data = res.data;
				this.number = res.data.number;
				this.rencentArr = res.data.babyActivity;
				let pic = res.data.baseImg;
				this.srcUrl = monDetailUrl + '?id=' + pic;
			},
			// 获取部件信息
			// async getMonParts() {
			// 	let param = {};
			// 	param.petId = this.mon_data.number || this.monDetail.number;
			// 	const data = await getMonPart(param);
			// 	this.part = data.data;
			// },
			getnum(number) {
				const stringValue = number.toString();
				const decimalPart = stringValue.includes('.') ? stringValue.split('.')[0] : '0';
				return decimalPart;
			},
			getDecimalPart(number) {
				if (number === undefined || number === null) {
					return '00';
				}
				const stringValue = number.toString();
				const decimalPart = stringValue.includes('.') ? stringValue.split('.')[1] : '00';
				return decimalPart;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.conter {
		padding: 10rpx 34.88rpx;

		.boutone {
			color: #ffffff;
			font-size: 38rpx;
			font-weight: 800;
			font-family: 'font';
		}

		.numberome {
			display: flex;
			align-items: center;
			height: 45rpx;
			color: #ffffff;
			font-size: 24rpx;
			font-family: 'font';
			font-weight: 500;
			padding: 0 15rpx 1rpx 15rpx;
			border-radius: 14rpx;
			background-color: #211f30;
			border: 1rpx solid #3c424d;
		}
        .icon{
			margin-top: 5rpx;
		}
		.number {
			color: #ffffff;
		}

		.barriers_box {
			width: 680rpx;
			height: 400rpx;
			margin: 34.88rpx 0;
			background: #211f30;
			border-radius: 14rpx;
			border: 1rpx solid #3c424d;
			padding: 20rpx 34.88rpx;

			.boutone {
				color: #ffffff;
				font-weight: 800;
				font-size: 42rpx;
				font-family: 'font';
			}

			.raceName {
				color: #ffffff;
				font-weight: 400;
				font-size: 38rpx;
				margin: 20rpx 0 0;
				font-family: 'font';
			}

			.number {
				display: flex;
				color: #8a92a3;
				font-size: 28rpx;
				font-weight: 400;
				align-items: center;
				position: absolute; //脱离文档
				font-family: 'font';
				border-radius: 9rpx;
				background: #282c34;
				margin: 28rpx 100rpx 0;
				padding: 5rpx 8rpx 5rpx 8rpx;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			}

			.popo_box {
				display: flex;
				margin: 35rpx 0 0;
				align-items: center;
				justify-content: space-between;

				.image_box {
					display: flex;
					align-items: center;

					.ioverui {
						width: 105rpx;
						height: 105rpx;
						border-radius: 50%;
						border-radius: 50%;
						object-fit: cover;
					}

					.iove_box {
						font-size: 28rpx;
						color: #ffffff;
						font-weight: 500;
						font-family: 'font';
						margin: 0 20rpx;
					}
				}

				.price {
					color: #ffffff;
					font-weight: 500;
					font-size: 28rpx;
					font-family: 'font';
				}
			}

			.buy_btn {
				width: 610rpx;
				height: 77rpx;
				color: #ffffff;
				font-size: 28rpx;
				font-weight: 400;
				font-family: 'font';
				line-height: 80rpx;
				border-radius: 14rpx;
				margin-top: 40rpx;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				background: linear-gradient(90deg, #3adfeb 0%, #4463ff 100%);
			}
		}

		// 性状
		.Traits_box {
			width: 680rpx;
			background: #211f30;
			border-radius: 14rpx;
			border: 1rpx solid #3c424d;
			padding: 20rpx 34.88rpx;
			margin-bottom: 34.88rpx;

			.Traitsone {
				color: #ffffff;
				font-weight: 800;
				font-size: 38rpx;
				font-family: 'font';
			}

			.collapseone {
				display: flex;
				color: #ffffff;
				height: 120rpx;
				font-weight: 400;
				font-size: 24rpx;
				margin-top: 20rpx;
				font-family: 'font';
				padding: 0 30rpx 0 30rpx;
				justify-content: space-between;
				border-bottom: 1rpx solid #282c34;

				.collapsetow1 {
					width: 134rpx;
					height: 49rpx;
					margin: 12.21rpx 0;
					text-align: center;
					line-height: 53rpx;
					background: #282c34;
					border-radius: 9rpx;
					box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				}

				.collapsethree1 {
					display: flex;
					margin-top: 22rpx;
				}
			}

			.bodypart {
				margin: 20rpx 0;

				.popo1 {
					display: flex;
				}

				.popo2 {
					width: 680rpx;
					padding: 34.88rpx 50rpx;

					.site_box {
						color: #fff;
						margin-top: 110rpx;
						margin-left: 34.88rpx;

						view {
							margin: 0 0 20rpx 0;
						}
					}

					.all_box {
						width: 420rpx;
						margin-left: 10rpx;
					}
				}

				.bodyparttow {
					margin-top: 80rpx;

					.bodypartu {
						display: flex;

						.headone {
							width: 70rpx;
							height: 70rpx;
							background: #282c34;
							border-radius: 9rpx;
							margin: 20rpx 34.88rpx;
							box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
						}

						.headtow {
							color: #8a92a3;
							margin: 22rpx 0;
							font-weight: 400;
							font-size: 17rpx;
							font-family: 'font';
						}
					}
				}
			}
		}

		.nextBreedCost {
			width: 500rpx;
			height: 100rpx;
			color: #fff;
			text-align: center;
			line-height: 105rpx;
			border-radius: 14rpx;
			border: 2rpx solid #22262d;
			background-color: #1c1f25;
		}

		// 性状
		// 家谱
		.genealogy_box {
			width: 680rpx;
			background: #211f30;
			border-radius: 14rpx;
			border: 1rpx solid #3c424d;
			padding: 30rpx 0;
			margin-bottom: 34.88rpx;

			.boutne {
				color: #ffffff;
				font-size: 38rpx;
				font-weight: 800;
				font-family: 'font';
				margin: 0 44rpx 20rpx;
			}

			.parents {
				color: #ffffff;
				font-size: 30rpx;
				font-weight: 400;
				font-family: 'font';
				text-align: center;
				margin-bottom: 20rpx;
			}

			.nextBreedCost1 {
				width: 550rpx;
				height: 610rpx;
				color: #fff;
				border-radius: 14rpx;
				border: 2rpx solid #22262d;
				background-color: #1c1f25;
				padding-top: 34.88rpx;
				padding-left: 20rpx;

				.site_box {
					margin-top: 110rpx;

					view {
						margin: 0 0 20rpx 0;
					}
				}

				.all_box {
					width: 420rpx;
					margin-left: 10rpx;
				}
			}

			.mon_baby {
				width: 620rpx;
				height: 150rpx;
				display: flex;
				padding: 22rpx;
				margin: 0 34.88rpx;
				position: relative;
				border-radius: 14rpx;
				margin-bottom: 20rpx;
				background-color: #21242b;
				border: 1rpx solid #282c34;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 14rpx;
				}

				.number_mon {
					margin: 42rpx 34.88rpx;
					.babymon_number {
						display: inline-block;
						padding: 5rpx 10rpx 2rpx 10rpx;
						border-radius: 8rpx;
						background-color: #2f3041;
						margin-top: 10rpx;
					}
				}
			}

			.children-box {
				display: flex;
				white-space: nowrap;
				overflow: scroll;
				margin-left: 10rpx;

				.disabledone {
					position: relative;

					.disabledtow {
						top: 20rpx;
						left: 39rpx;
						height: 40rpx;
						display: flex;
						color: #46A6F8;
						align-items: center;
						font-size: 24rpx;
						font-family: 'font';
						font-weight: 400;
						border-radius: 9rpx;
						position: absolute;
						padding: 0 10rpx 0 10rpx;
						background: rgba(40, 44, 52, 0.8);
					}

					.disabledtow1 {
						color: #fff;
						width: 103rpx;
						height: 40rpx;
						bottom: 10rpx;
						left: 110rpx;
						font-size: 24rpx;
						transform: scale(0.8);
						font-family: 'font';
						text-align: center;
						font-weight: 400;
						line-height: 40rpx;
						border-radius: 9rpx;
						position: absolute;
						background: rgba(40, 44, 52, 0.8);
					}
				}
			}
		}

		// 家谱
		// 近期活动
		.activities_box {
			width: 680rpx;
			background: #211f30;
			border-radius: 14rpx;
			border: 1rpx solid #3c424d;
			margin-bottom: 34.88rpx;
			padding: 30rpx 25rpx;

			.boutne {
				color: #ffffff;
				font-size: 38rpx;
				font-weight: 800;
				font-family: 'font';
				margin: 0 10rpx 20rpx;
			}

			.disabledone {
				width: 630rpx;
				height: 280rpx;
				border-radius: 14rpx;
				margin-bottom: 34.88rpx;
				background-color: #21242b;

				.popo {
					width: 630rpx;
					height: 80rpx;
					display: flex;
					padding: 0 20rpx 0 20rpx;
					justify-content: space-between;
					border-bottom: 1rpx solid #333;

					view {
						color: #8a92a3;
						line-height: 80rpx;
						font-family: 'font';
					}
				}

				.conterakpap {
					width: 630rpx;
					display: flex;
					padding: 20rpx 20rpx 0 20rpx;
					justify-content: space-between;
				}
			}
		}

		// 近期活动
	}
</style>